<style lang="scss" scoped>
.main {
  background-color: #ebebeb;
}

.swiper-bg {
  background-color: #0e0e0e;
}

.search-bg {
  background-image: linear-gradient(#0e0e0e, #ebebeb);
  padding: 10px 10px;

  .img-box {
    img {
      width: 100%;
    }
  }
}

.all-list-btn {
  color: white;
  text-align: center;

  div:last-child {
    margin-top: -15px;
    font-size: 12px;
  }
}

.product-list {
  margin: 1.5vh 10px;
}

.bottom-text {
  width: 80%;
  text-align: center;
  margin: 10px auto;
  position: relative;
  height: 5px;

  div {
    color: gainsboro;
    width: 40%;
    font-size: 14px;
    left: 30%;
    bottom: -3px;
    position: absolute;
    background-color: #ffffff;
  }

  border-top: 1px solid gainsboro;
}
</style>
<template>
  <div class="main">
    <div class="search-bg">
      <!--商店的logo-->
      <div class="img-box">
        <img src="@/assets/imgs/logo.png" />
      </div>

      <!--搜索框组件-->
      <FakeSearch :bgc="'transparent'">
        <div class="all-list-btn" @click.stop="$router.push('menu')">
          <van-icon name="shop-o" size="20px"></van-icon>
          <div>全部分类</div>
        </div>
      </FakeSearch>

      <!--轮播图-->
      <div class="display-card swiper-bg">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="image in swiper_images" :key="image.id">
            <div>
              <img :src="image.path" alt="" style="width: 100%" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="display-card" style="margin-top: 1.5vh">
        <!--商品大类展示卡片,点击后跳转至分类展示路由-->
        <van-grid :column-num="1">
          <van-grid-item
            v-for="(image, index) in grid_images"
            :key="image.id"
            @click="
              $router.push({
                name: 'category',
                query: { index },
              })
            "
          >
            <van-image :src="image.path"></van-image>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="display-card product-list">
      <van-tabs>
        <van-tab v-for="item in tab_list" :key="item.id" :title="item.title">
          <div class="display-card">
            <ProductCard :product_data="product_data"></ProductCard>
            <div class="bottom-text">
              <div>我是有底线的</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>

  <router-view></router-view>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { api_get_swiper_imgs, get_all_products } from "@/service/api/home";
import { api_get_shop_classify } from "@/service/api/menu";
// 引入pinia仓库
import { use_category_store } from "@/stores/category-store";

// 引入工具函数
import { swiper_img_handler } from "@/utils/swiper-imgs";
// 引入组件
import ProductCard from "@/components/ProductCard.vue";
import FakeSearch from "@/components/FakeSearch.vue";

const category_store = use_category_store();
const search_value = ref("");
// 初始化轮播图数据
const swiper_images: any = ref([]);
// 初始化栅格栏图片数据
const grid_images: any = ref([]);
// 获取页面轮播图
const init_imgs = async (): Promise<void> => {
  let res: any = await api_get_swiper_imgs(1);
  swiper_images.value = swiper_img_handler(res.result);
  let res2: any = await api_get_swiper_imgs(2);
  grid_images.value = swiper_img_handler(res2.result);
};

//标签页数据
const tab_list = reactive([
  {
    id: 1,
    title: "综合排行",
  },
  {
    id: 2,
    title: "销量排行",
  },
]);
// 获取懒加载商品展示的列表
const params = {
  project_id: 1,
  limit: 999,
  page: 1,
};
const product_data = ref([]);
// 获取全部的商品列表
const get_product = async () => {
  let res: any = await get_all_products(params);
  res.result.rows.forEach((item) => {
    product_data.value.push(item);
  });
};
const get_classify = async () => {
  let res: any = await api_get_shop_classify(params);
  category_store.category = res.result;
};
onMounted(() => {
  init_imgs();
  get_product();
  get_classify();
});
</script>
